const path = require("path")
// html 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 打包前先清除dist
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // 入口
    entry: "./src/index.ts",
    mode: "production",//  development  production
    //指定打包输出
    output: {
        // path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        //打包不用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    devServer: {
        host:'0.0.0.0',
        contentBase: path.resolve(__dirname, 'dist'),
        port: 8888,
        compress: true, //服务端是否启用压缩
    },
    module: {
        //规则
        rules: [
            {
                test: /\.ts$/,
                use: [{
                    //指定加载器
                    loader: "babel-loader",
                    options: {
                        //预定义的环境 浏览器
                        presets: [
                            //指定环境插件
                            ["@babel/preset-env",
                                //配置信息
                                {
                                    //指定浏览器版本
                                    targets: {
                                        // "chrome:": "58",
                                        "ie": "11"
                                    },
                                    //用哪个版本的corejs
                                    "corejs": "3",
                                    //使用corejs  usage  按需加载
                                    "useBuiltIns": "usage"
                                }]
                        ]
                    }
                }, "ts-loader"],
                exclude: /node-models/
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/'
                    }
                }
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    ["postcss-preset-env", {
                                        browser: "last 3 version"
                                    }]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]

            },

        ]
    },
    //申明哪些文件是可以被引用的
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin(
            {
                title: "MyTitle",
                filename: 'index.html',     //生成html文件的文件名，默认是index.html
                template: './src/index.html',     //本地html文件模板的地址
            }
        ),
        new CleanWebpackPlugin()
    ]
}